<template>
    <div style="padding:10px;background-color: white;">
            <Search @submit="handleSearch" @reset="handleReset">
                <AFormItem label="角色名称">
                    <AInput v-model:value="state.formData.name"></AInput>
                </AFormItem>
            </Search>
        </div>
        <div style="padding:10px;margin-top:10px;background-color: white;">
            <div style="margin-bottom: 10px;">
                <AButton type="primary"  @click="addPermission">新增</AButton>
            </div>
            <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false"></ATable>
        </div>
        <FormModal v-if="state.modalVisible" :currentData="state.currentData" @ok="modalOk" @cancel="modalCancel"></FormModal>
    </template>
    <script lang="ts" setup>
    import {reactive,h,onMounted} from "vue";
    import FormModal from "./components/FormModal/index.vue"
    import Search from '@/components/Search/Search.vue';
    import Pagination from "@/components/Pagination/index.vue";
    import { PageResult, ResponseVo, CommontTypes } from "@/type";
    import { RoleService } from "@/service";
    import { Button, Popconfirm, message } from "ant-design-vue";
    const state = reactive<{
        formData:any,
        modalVisible: boolean,
        dataSource:any[];
        currentData:any
    }>({
        formData:{
            name:"",
            value:""
        },
            modalVisible: false,
            dataSource:[],
            currentData:{}
    })
    
    const columns = [
        {title:"角色ID",dataIndex:"id"},
        {title:"角色名称",dataIndex:"name"},
        {title:"角色值",dataIndex:"value"},
        {title:"描述",dataIndex:"description"},
        {title:"创建人",customRender:({record}:{record:any})=>{
            return h('div',{},record.creator?`${record.creator}/${record.createTime}`:'-')
        }},
        {title:"修改人",customRender:({record}:{record:any})=>{
            return h('div',{},record.updator?`${record.updator}/${record.updateTime}`:'-')
        }},
        {title:"操作",customRender:({record}:{record:any})=>{
            return h('div',{},[
             h(Button,{type:"text",onClick:()=>editPermission(record)},"编辑"),
            h(Popconfirm,{title:"确认执行此操作",onConfirm:()=>deletePermission(record)},[ h(Button,{type:"text"},"删除")])
            ])
        }}
    ]
    
    
    onMounted(()=>{
        handleSearch();
    })
    
    const handleSearch = async()=>{
        const res:ResponseVo<any>= await RoleService.pageRole({...state.formData});
        if(res.code===0){
            state.dataSource = res.data;
        }
    }
    
    const deletePermission = async(record:any)=>{
        const res:ResponseVo<PageResult<any>>= await RoleService.deleteRole(record.id);
            if(res.code===0){
                message.success("操作成功！")
                handleSearch();
            }
    }
    
    const pageChange = (page:number,size:number)=>{
        handleSearch();
    }
    
    const handleReset = ()=>{
        state.formData = {};
        handleSearch();
    }
    
    const addPermission = ()=>{
        state.currentData = {};
        state.modalVisible = true;
    }
    
    const editPermission = (record:any)=>{
        state.currentData = {...record};
        state.modalVisible = true;
    }
    
    const modalOk =()=>{
        state.modalVisible = false;
        handleSearch();
    }
    
    const modalCancel = ()=>{
        state.modalVisible = false;
    }
    
    </script>